<template>
  <div class="consumptionRecords detail-form-item">
    <div class="InfowindowCon">
      <el-form class="my-form" size="mini" label-width="100px">
        <el-form-item label="消费时间：">
          {{ infowindowData.time }}
        </el-form-item>
        <el-form-item label="消费商户：">
          {{ infowindowData.merchant }}
        </el-form-item>
        <el-form-item label="消费金额：">
          <b class="amount text-danger">￥{{ infowindowData.amount }}</b>
          <el-tag
            :type="getPayWayTag(infowindowData.pay_way)"
            size="mini"
            >{{ infowindowData.pay_way_str }}</el-tag
          >
        </el-form-item>
        <el-form-item label="距离：">
          {{ infowindowData.distance }}
        </el-form-item>
      </el-form>
    </div>
    <div class="point"></div>
  </div>
</template>

<script>
import getTagType from "@/utils/getTagType";
export default {
  components: {},
  props: {
    infowindowData: {},
  },
  data() {
    return {};
  },
  methods: {
    getPayWayTag(type) {
      return getTagType.getPayWayTag(type);
    },
  },
  created() {},
};
</script>

<style lang="scss" scoped>
.detail-form-item ::v-deep .el-form-item__label {
  line-height: 30px;
}
.detail-form-item ::v-deep .el-form-item__content {
  line-height: 30px;
  text-align: left;
}
.detail-form-item ::v-deep .el-form-item {
  margin-bottom: 0;
}
.consumptionRecords {
  position: relative;
  padding-bottom: 5px;
  .InfowindowCon {
    min-width: 100px;
    white-space: nowrap;
    background-color: white;
    text-align: center;
    padding: 12px 10px 12px;
    border-radius: 6px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 4px 0px;
    border: 1px solid #eee;
    .amount{
      display: inline-block;
      margin-right: 10px;
    }
  }

  .point {
    width: 10px;
    height: 10px;
    background-color: white;
    transform: rotate(45deg);
    position: absolute;
    bottom: 1px;
    left: 0px;
    right: 0px;
    margin: auto;
    box-shadow: rgba(0, 0, 0, 0.15) 2px 2px 2px;
  }
}
</style>
